// 数据劫持
import Observer from "./observer";
// 模版编译
import Compiler from "./compiler";

class Vue {
    // 构造函数
    constructor(options) {
        // console.log(options);
        // 1.获取元素DOM对象
        this.$el = document.querySelector(options.el);
        // console.log('this.$el', this.$el);
        // 转存数据data
        this.$data = options.data || {};
        // console.log('this.$data', this.$data);

        // 数据和函数的代理
        this._proxyData(this.$data);
        this._proxyMethods(options.methods);

        // 数据劫持
        new Observer(this.$data);
        // 模版编译
        new Compiler(this);
    }

    /**
     * 数据的代理
     * @param data
     * @private
     */
    _proxyData(data) {
        Object.keys(data).forEach(key => {
            Object.defineProperty(this, key, {
                get() {
                    return data[key];
                },
                set(v) {
                    data[key] = v;
                }
            })
        });
    }

    /**
     * 函数的代理
     * @param methods
     * @private
     */
    _proxyMethods(methods) {
        if (methods && typeof methods === "object") {
            Object.keys(methods).forEach(key => {
                this[key] = methods[key];
            })
        }
    }
}

// 挂载到window.Vue上
window.Vue = Vue;
